<template>
  <div class="add-key">
    <p class="title">密钥激活</p>
    <div class="key-num">
      <p class="key-p">
        <img src="@/assets/miyaoguanli02.png" alt="">
        <input type="text" v-model="miyao" placeholder="请输入密钥串号">
      </p>
      <p class="tip">与孩子测试，开启方案定制之旅</p>
    </div>
    <div class="has-key">
      <div class="left">
        <p>秘钥获取导向：</p>
        <p>1.需要获得密钥的用户请联系
        {{contPhones}}，客服将详细为你解答。</p>
        <p>2.关注微信公众号平台智保天赋，可
        在线联系客服人员进行咨询。</p>
      </div>
      <div class="right">
        <img src="@/assets/miyaoguanli03.png" alt="">
      </div>
    </div>
    <span class="btn" @click="submit()">提交</span>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>
import {addkey, contPhone} from '@/api/api'
import { Toast } from 'vux'

export default {
  components: {
    Toast
  },
  data () {
    return {
      is_toast: false,
      toast_con: '',
      miyao:'',
      contPhones: "",
    }
  },
  created () {
    this.cont_phone()
  },
  methods: {
    submit(){
      addkey(this.miyao).then((res) =>{
        this.toast_con=res.data.msg
        this.is_toast=true
        if(res.data.code == '200'){
          setTimeout(() => {
            this.$router.push({path: './keyManagement'});
          },2000)
        }        
      }).catch((err) => {
        console.dir(err)
      })
    },
    cont_phone() {
      contPhone().then((res) => {
        this.contPhones = res.data.data.phone;
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.add-key
  min-height 100vh
  background-color #f5f5f5
  .title
    padding-left 1.5rem
    line-height 4rem
    height 4rem
    color #333
    font-size 1.2rem
  .key-num
    background-color #fff
    padding-left 1.5rem
    box-sizing border-box
    .key-p
      position relative
      line-height 6.5rem
      img
        position absolute
        width .9rem
        left 0
        top 2.3rem
      input
        border-bottom 1px solid #e6e6e6
        background-color #fff
        line-height 6.5rem
        height 6.5rem
        font-size 2.1rem
        color #333
        padding-left 2.6rem
        outline none
        width 100%
        box-sizing border-box
        font-weight 500
        &::-webkit-input-placeholder
          color #ccc
    .tip
      line-height 4rem
      height 4rem
      font-size 1.2rem
      color #999
  .has-key
    padding 0 1.5rem
    margin-top 2.3rem
    overflow hidden
    .left
      width 22rem
      color #666
      font-size 1.3rem
      line-height 2.4rem
      float left
    .right
      width 9.7rem
      float right
      margin-top 2rem
  .btn
    color #fff
    font-size 1.7rem
    font-weight 500
    width 92%
    margin-left 4%
    height 5rem
    line-height 5rem
    border-radius 100px
    background-color #172F6D
    display block
    margin-top 3rem
    text-align center
</style>